<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log Viewer</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .list-custom {
            display: table;
            width: 100%;
        }
        .list-item {
            display: table-row;
            width: 100%;
        }
        .list-key, .list-value {
            display: table-cell;
            padding: 5px;
            border-bottom: 1px solid #ddd;
        }
        .list-key {
            font-weight: bold;
            width: 25%;
        }
    </style>
</head>
<body class="bg-light text-dark">
    <div class="container mt-4">
        <form method="get" action="/log/" class="form-inline">
            <div class="form-group flex-grow-1 mb-3">
                <input type="text" name="q" value="{{ request.args.get('q', '') }}" placeholder="Search for logs..." class="form-control w-100 mr-2">
            </div>
            <button type="submit" class="btn btn-primary mb-3">Search</button>
        </form>

        <table id="logTable" class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th scope="col" class="sortable">日志查询</th>
                </tr>
            </thead>
            <tbody>
                {% for log in logs %}
                <tr onclick="toggleDetails(this)">
                    <td>{{ log.console }}</td>
                </tr>
                <tr class="details" style="display: none;">
                    <td colspan="1">
                        <div class="list-custom">
                            {% for key, value in log.items() %}
                            <div class="list-item">
                                <div class="list-key">{{ key }}</div>
                                <div class="list-value">{{ value }}</div>
                            </div>
                            {% endfor %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if pagination_info.has_prev %}
                <li class="page-item"><a class="page-link" href="?q={{ request.args.get('q', '') }}&page={{ pagination_info.current_page - 1 }}&per_page=10">Previous</a></li>
                {% endif %}
                {% for page_num in range(1, pagination_info.total_pages + 1) %}
                <li class="page-item {% if page_num == pagination_info.current_page %}active{% endif %}">
                    <a class="page-link" href="?q={{ request.args.get('q', '') }}&page={{ page_num }}&per_page=10">{{ page_num }}</a>
                </li>
                {% endfor %}
                {% if pagination_info.has_next %}
                <li class="page-item"><a class="page-link" href="?q={{ request.args.get('q', '') }}&page={{ pagination_info.current_page + 1 }}&per_page=10">Next</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
    <script>
        function toggleDetails(row) {
            const detailsRow = row.nextElementSibling;
            detailsRow.style.display = detailsRow.style.display === "none" || detailsRow.style.display === "" ? "table-row" : "none";
        }
    </script>
</body>
</html>